<%- include('layout/header', { title: '微博 - 注册', isNarrow: true })%>

<h1>注册</h1>
<% if (locals.isLogin) { %>
    <p><%= locals.userName%> 您已成功登录，请直接访问<a href="/">首页</a></p>
<% } else { %>
    <form>
        <div class="form-group">
            <input type="text" class="form-control" id="input-username" placeholder="请输入用户名">
            <small id="span-username-info" class="form-text text-muted"></small>
        </div>
        <div class="form-group">
            <input type="password" class="form-control" id="input-password" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" id="input-password-repeat" placeholder="重新输入密码">
            <small id="span-password-repeat-info" class="form-text text-muted"></small>
        </div>
        <div class="form-group">
            <select class="form-control" id="select-gender">
                <option value="1">男</option>
                <option value="2">女</option>
                <option value="3">保密</option>
            </select>
        </div>
        <button type="submit" class="btn btn-primary" id="btn-submit">注册</button>
        &nbsp;
        <a href="/login">已有账号，返回登录>></a>
    </form>

    <script>
        $(function() {
            var $inputUserName = $('#input-username')
            var $spanUserNameInfo = $('#span-username-info')
            var $inputPassword = $('#input-password')
            var $inputPasswordRepeat = $('#input-password-repeat')
            var $spanPasswordRepeatInfo = $('#span-password-repeat-info')
            var $selectGender = $('#select-gender')
            var userNameTimeoutId
            var passwordTimeoutId
            var isPasswordSame = false // 默认两次密码不一致
            var isUserNameExist = true // 默认用户名已存在

            // 监听用户名输入
            $inputUserName.on('input', function() {
                // 做一个简单的防抖
                if (userNameTimeoutId) {
                    clearTimeout(userNameTimeoutId)
                }
                userNameTimeoutId = setTimeout(function() {
                    // 判断用户名是否已存在
                    var userName = $inputUserName.val()
                    ajax.post('/api/user/isExist', {
                        userName
                    }, function(err, data) {
                        $spanUserNameInfo.show()
                        if (err) {
                            $spanUserNameInfo.text('用户名可用')
                            isUserNameExist = false
                        } else {
                            $spanUserNameInfo.text('用户名已存在！')
                            isUserNameExist = true
                        }
                    })
                }, 500)
            })

            // 监听验证密码输入
            $inputPasswordRepeat.on('input', function () {
                // 做一个简单的防抖
                if (passwordTimeoutId) {
                    clearTimeout(passwordTimeoutId)
                }
                passwordTimeoutId = setTimeout(function() {
                    var password = $inputPassword.val()
                    var passwordRepeat = $inputPasswordRepeat.val()
                    $spanPasswordRepeatInfo.show()
                    if (password === passwordRepeat) {
                        $spanPasswordRepeatInfo.text('两次密码一致')
                        isPasswordSame = true
                    } else {
                        $spanPasswordRepeatInfo.text('两次密码不一致！')
                        isPasswordSame = false
                    }
                }, 500)
            })

            // 注册事件
            $('#btn-submit').click(function(e) {
                // 阻止默认的提交表单行为
                e.preventDefault()

                // 验证
                if (isUserNameExist) {
                    alert('用户名已存在')
                    return
                }
                if (!isPasswordSame) {
                    alert('两次密码不一致')
                    return
                }

                var userName = $inputUserName.val()
                var password = $inputPassword.val()
                var gender = parseInt($selectGender.val())

                // 提交数据
                ajax.post('/api/user/register', {
                    userName,
                    password,
                    gender
                }, function(err, data) {
                    if (err) {
                        alert(err)
                        return
                    }
                    alert('注册成功，请登录')
                    location.href = '/login'
                })
            })
        })
    </script>
<% } %>

<%- include('layout/footer')%>